<%@ page import="java.util.ArrayList" %>
<%@ page import="main_com.pojo.FileBean" %>
<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件列表</title>
    <style>
        /* 基本页面样式 */
        body {
            font-family: 'Arial', sans-serif;
            background-color: #f4f7fc;
            margin: 0;
            padding: 0;
            color: #333;
        }

        header {
            text-align: center;
            background-color: #4c6faf;
            color: white;
            padding: 10px 0;
            font-size: 24px;
            font-weight: bold;
        }

        .page-container {
            width: 90%;
            max-width: 1200px;
            margin: 40px auto;
            padding: 20px;
            background-color: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

        .header {
            text-align: center;
            margin-bottom: 30px;
        }

        .header a {
            margin: 0 15px;
            text-decoration: none;
            color: #007bff;
            font-size: 16px;
            font-weight: bold;
        }

        .header a:hover {
            text-decoration: underline;
            color: #0056b3;
        }

        hr {
            border: none;
            border-top: 1px solid #e0e0e0;
            margin: 30px 0;
        }

        .empty-message h1 {
            text-align: center;
            color: #ff6347;
        }

        /* 文件表格样式 */
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 40px;
        }

        table th,
        table td {
            padding: 12px;
            text-align: center;
            font-size: 14px;
        }

        table th {
            background-color: #007bff;
            color: white;
            font-weight: bold;
        }

        table td {
            background-color: #f9f9f9;
            border-bottom: 1px solid #ddd;
        }

        table tr:nth-child(even) td {
            background-color: #f1f1f1;
        }

        /* 按钮样式 */
        .button-edit, .button-delete {
            display: inline-block;
            padding: 6px 12px;
            margin: 0 5px;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
            transition: background-color 0.3s, color 0.3s;
        }

        .button-edit {
            background-color: #28a745;
            color: white;
        }

        .button-edit:hover {
            background-color: #218838;
        }

        .button-delete {
            background-color: #dc3545;
            color: white;
        }

        a {
            text-decoration: none; /* 去掉下划线 */
        }

        .button-delete:hover {
            background-color: #c82333;
        }

        footer {
            text-align: center;
            font-size: 14px;
            color: #888;
            margin-top: 30px;
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .page-container {
                width: 95%;
            }

            table th,
            table td {
                font-size: 12px;
                padding: 8px;
            }

            .header a {
                font-size: 14px;
            }
        }
    </style>
</head>
<body>
<header>个人信息管理系统 - 文件上传</header>
<div class="page-container">
    <div class="header">
        <a href="http://localhost/fileManager/fileUp.jsp">上传文件</a>
    </div>
    <hr>

    <div class="content">
        <%
            ArrayList<FileBean> files = (ArrayList<FileBean>) request.getSession().getAttribute("files");
            if (files == null || files.isEmpty()) {
        %>
        <div class="empty-message">
            <h1>您还没有任何文件！</h1>
        </div>
        <%
        } else {
        %>
        <table>
            <thead>
            <tr>
                <th>文件名</th>
                <th>标题</th>
                <th>大小</th>
                <th>类型</th>
                <th>下载</th>
                <th>删除</th>
            </tr>
            </thead>
            <tbody>
            <%
                int row = 0;
                for (FileBean file : files) {
                    row++;
                    String rowClass = (row % 2 == 0) ? "even" : "odd";
            %>
            <tr class="<%= rowClass %>">
                <td><%= file.getName() %>
                </td>
                <td><%= file.getTitle() %>
                </td>
                <%--<%
                    String[] d = {"字节", "k"
                %>--%>
                <td><%= file.getSize() %>
                </td>
                <td><%= file.getContentType() %>
                </td>
                <td>
                    <a href="<%=file.getFilePath()%>" download="<%=file.getName()%>" class="button-edit">下载</a>
                </td>
                <td>
                    <a href="http://localhost/FileDelController/fileDel?fileName=<%=file.getName()%>"
                       class="button-delete">删除</a>
                </td>
            </tr>
            <%
                }
            %>
            </tbody>
        </table>
        <%
            }
        %>
    </div>
</div>
<footer>
    <p>&copy; 2024 个人信息管理系统. 版权所有.</p>
</footer>
</body>
</html>
